<!-- 基本信息 -->

<template>
  <div style="display: flex">
    <div class="form-item">
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>基本信息</div></a-space
        >
      </div>
      <div class="demand-index">
        <a-form
          ref="form"
          :model="demand.info"
          autoLabelWidth
          :layout="(layout as Tlayout)"
        >
          <a-row :gutter="16">
            <a-col
              v-for="item in demandForm?.info?.design?.form"
              :key="item.id"
              :span="item.span"
            >
              <FormItem
                :name="item.name"
                :componentType="item.componentType"
                v-model:props="item.props"
                :required="item.required"
                v-model:values="item.values"
                :disabled="item.disabled"
              />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import { useRouter, useRoute } from 'vue-router';
  import { cloneDeep } from 'lodash';
  import { getSinglePurchaseOrder } from '@/api/buy-management/buy-order/index';
  import { getOpenTemp } from '@/api/buy-management/get-template/index';

  const router = useRouter();
  const route = useRoute();
  const id = Number(route.query.id); // 合同id
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const demand = reactive<any>({
    info: {
      number: '',
      name: '',
      description: '',
      templateId: 0,
      contractId: 0,
      supplierId: 0,
      priority: 0,
      state: 0,
      salesman: 0,
      totalPrice: 0,
      extend: '',
      product: [],
      deliveryItem: [],
    },
  });

  const msgKey = Object.keys(demand.info);

  const demandForm = reactive<any>({
    info: { design: { form: [] } },
  });
  const isOrderType = ref(false);
  const msgKays = ref();

  const getClientOrderInfo = async () => {
    const res = await Promise.all([
      getOpenTemp({ type: 3 }),
      getSinglePurchaseOrder({ id }),
    ]);
    demand.info = res[1];
    isOrderType.value = true;
    demandForm.info.design.form =
      demand.info.isAutoToOrder === 1
        ? res[0].design.form
        : demand.info.extends;
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      item.disabled = true;
      if (demand.info.isAutoToOrder === 1) {
        item.props = JSON.parse(item.props);
        item.values = item.values === '[]' ? JSON.parse(item.values) : [];
      }
      item.values[0] = demand.info[item.fieldName];
      if (item.code === 'BUY-DETAILED') {
        item.props.data = demand.info.product ? demand.info.product : [];
      }
      if (item.code === 'FILE') {
        item.props.data = demand.info.file || [];
      }
    });
  };

  getClientOrderInfo();

  // 取消按钮
  const cancel = () => router.back();
</script>

<style scoped lang="less">
  .contract-index {
    padding: 16px;
    width: 95%;
    margin: 0 auto;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .contract-item {
      width: 85%;
    }
    .addClient {
      position: absolute;
      margin-left: 20px;
      margin-top: -15px;
    }

    :deep(.arco-input[disabled]),
    :deep(.arco-textarea[disabled]) {
      -webkit-text-fill-color: #165dff;
    }
  }

  .demand-index {
    padding: 50px;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .form-item {
    width: 95%;
  }
</style>
